<template>
	  <view>
			<!-- 他人消息 -->
			<view v-if="item.flow === 'in'" class="u-flex content content-in" @click="preview(item.payload.fileUrl)">
				<text class="icon color-blue" style="font-weight: 400;font-size:100rpx">&#xe64f;</text>
				<view class="file-text">
					<text class="file-name u-font-30">{{item.payload.fileName}}</text>
					<text class="file-size">{{ formatFileSize(item.payload.fileSize) }}</text>
				</view>
			</view>
			<!-- 自身消息 -->
	     <view v-if="item.flow === 'out'" class="u-flex content content-out" @click="preview(item.payload.fileUrl)">
				 <view class="file-text">
				 	<text class="file-name u-font-30">{{item.payload.fileName}}</text>
				 	<text class="file-size">{{ formatFileSize(item.payload.fileSize) }}</text>
				 </view>
				 	<text class="icon color-blue" style="font-weight: 400;font-size:100rpx">&#xe64f;</text>
			 </view>	
			 <!-- 合并消息 -->
			 <view v-if="!item.flow" class="u-flex content content-in"  @click="preview(item.messageBody[0].payload.fileUrl)">
			 	 <view class="file-text">
			 	 	<text class="file-name u-font-30">{{item.messageBody[0].payload.fileName}}</text>
			 	 	<text class="file-size">{{ formatFileSize(item.messageBody[0].payload.fileSize) }}</text>
			 	 </view>
			 	 	<text class="icon color-blue" style="font-weight: 400;font-size:100rpx">&#xe64f;</text>
			  </view>
	  </view>
</template>
    
<script>
	export default {
		data() {
			return {
				pdfUrl:'',
			}
		},
		props: {
			item: {
				type: Object,
				default: null
			},
			index: {
				type: Number,
				default: 0,
			},
		},
		mounted() {
			setTimeout(()=> {
				console.log(this.item)
			})
		},
		methods: {
			//预览pdf
			preview(pdfUrl){
					uni.showLoading();
					let urlPath=pdfUrl.replace(/http:/g,"https:")
					uni.downloadFile({
							url: urlPath,
							success: (rest) => {
									let filePath = rest.tempFilePath
									uni.openDocument({
											filePath: filePath,
											success: function(res) {
												uni.hideLoading()
											}
									})
							}
					})
			},
		 formatFileSize(fileSize) {
			     if(fileSize == 0) {
						 return ''
					 }
		       else if (fileSize < 1024) {
		         return fileSize + 'B'
		       } else if (fileSize < 1024 * 1024) {
		         var temp = fileSize / 1024
		         temp = temp.toFixed(2)
		         return temp + 'KB'
		       } else if (fileSize < 1024 * 1024 * 1024) {
		         var temp = fileSize / (1024 * 1024)
		         temp = temp.toFixed(2)
		         return temp + 'MB'
		       } else {
		         var temp = fileSize / (1024 * 1024 * 1024)
		         temp = temp.toFixed(2)
		         return temp + 'GB'
		       }  
		     }
		}
	}
</script>
<style lang="scss" scoped>
	.color-blue{
		color: #0089FF;
	}
	.content {
			display: flex;
			flex-wrap: nowrap;
			width: 460rpx;
			padding: 0 20rpx;
	    &-in {
				padding-left: 10px;
	      background: #fff;
	      border-radius: 0px 10px 10px 10px;
				flex-wrap: nowrap;
				justify-content: space-between;
				.file-text {
					.file-name {
						text-align: right;
					}
					.file-size {
						text-align: right;
						
					}
				}
	    }
	    &-out {
				padding-right: 0;
	      background: #DCEAFD;
	      border-radius: 10px 0px 10px 10px;
				justify-content: space-between;
				.file-text {
				}
				.file-name {
					text-align: left;
				}
				.file-size {
					text-align: left;
				}
	    }
	  }
		.file-text-in {
			display: flex;
			flex-direction: column;
			.file-name {
				color: #393939;
				white-space:pre-wrap;			
			}
			.file-size {
				color: #9e9e9e;
				font-size: 24rpx;
				
			}
		}
	.file-text {
		display: flex;
		flex-direction: column;
		.file-name {
			color: #393939;
			white-space:pre-wrap;			
		}
		.file-size {
			color: #9e9e9e;
			font-size: 24rpx;
			
		}
	}
</style>